বুটস্ট্র্যাপ ৫ এর JavaScript প্লাগইনগুলি ওয়েব পৃষ্ঠায় ইন্টার‍্যাকটিভিটি এবং ফাংশনালিটি যোগ করতে ব্যবহৃত হয়। এগুলি বিভিন্ন UI উপাদান যেমন মডাল, টুলটিপ, পপওভার, কারোসেল, একর্ডিয়ন ইত্যাদি তৈরি করতে সহায়তা করে। বুটস্ট্র্যাপ ৫-এ JavaScript প্লাগইনগুলি বিল্ট-ইন আছেযা কাজ করার জন্য শুধুমাত্র সিএসএস ক্লাস ব্যবহার করার পাশাপাশি কিছু ইন্টারঅ্যাকশন প্রোগ্রামিংও প্রয়োজন হয়।

বুটস্ট্র্যাপ ৫ প্লাগইনগুলির মধ্যে কিছু সাধারণ ফিচার যেমন DOM ইন্টারঅ্যাকশন, ইউজার ইভেন্ট ট্র্যাকিং এবং UI উপাদানগুলোতে অ্যানিমেশন প্রয়োগ করা অন্তর্ভুক্ত। এই প্লাগইনগুলির অধিকাংশই জাভাস্ক্রিপ্ট লাইব্রেরি দ্বারা পরিচালিত হয় এবং এগুলি সাধারণত স্লাইডিং, টগলিং, শো-হাইডিং, কন্টেন্ট ডাইনামিকালি লোডিং ইত্যাদি কাজে ব্যবহৃত হয়।

Bootstrap 5 এর জনপ্রিয় JavaScript প্লাগইনস

১. Modal

Modal একটি পপ-আপ উইন্ডো যা সাধারণত গুরুত্বপূর্ণ বা অতিরিক্ত তথ্য দেখানোর জন্য ব্যবহৃত হয়। এটি একটি ইন্টার‍্যাকটিভ কম্পোনেন্ট যা বুটস্ট্র্যাপের modal ক্লাস ব্যবহার করে তৈরি হয়।

উদাহরণ:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Content goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

২. Tooltip

Tooltip ছোট ইনফরমেশন বক্স যা ব্যবহারকারীকে একটি আইটেমের উপর মাউস রেখে তা সম্পর্কিত তথ্য দেখায়। এটি সাধারণত বাটন, লিঙ্ক বা অন্য কোনো ইন্টার‍্যাকটিভ উপাদানের জন্য ব্যবহৃত হয়।

উদাহরণ:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Hover over me
</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

৩. Popover

Popover টুলটিপের মতো, কিন্তু এটি আরো বড় এবং কাস্টমাইজযোগ্য। আপনি এতে ছবিও যুক্ত করতে পারেন এবং একাধিক কনটেন্ট যেমন টেক্সট, লিঙ্ক, ইমেজ ইত্যাদি রাখতে পারেন।

উদাহরণ:

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="Some content inside the popover">
  Click me to toggle popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>

৪. Carousel

Carousel একটি স্লাইড শো উপাদান যা একাধিক ইমেজ বা কনটেন্ট স্লাইড করার জন্য ব্যবহৃত হয়। এটি ইউজারের দৃষ্টি আকর্ষণ করতে এবং ভার্টিকাল বা হরিজেন্টাল স্লাইডিং প্রভাব দিতে ব্যবহৃত হয়।

উদাহরণ:

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

৫. Collapse

Collapse ব্যবহারকারীকে নির্দিষ্ট অংশগুলো দেখতে বা লুকাতে সহায়তা করে, এটি সাধারণত FAQ সেকশন বা একর্ডিয়ন স্টাইলে ব্যবহৃত হয়।

উদাহরণ:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle collapse
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This is some content in a collapse element.
  </div>
</div>

JavaScript প্লাগইনস সক্রিয় করা

বুটস্ট্র্যাপ ৫-এর JavaScript প্লাগইনগুলি সক্রিয় করতে আপনাকে অবশ্যই পেজে বুটস্ট্র্যাপের JavaScript ফাইল অন্তর্ভুক্ত করতে হবে। এর জন্য আপনি CDN বা লোকাল ফাইল ব্যবহার করতে পারেন।

CDN থেকে JavaScript ফাইল ব্যবহার:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

সারাংশ:

বুটস্ট্র্যাপ ৫-এর JavaScript প্লাগইনগুলি ওয়েব পেজে অত্যাধুনিক ইন্টার‍্যাকটিভ উপাদান তৈরি করতে সহায়তা করে, যেমন মডাল, টুলটিপ, পপওভার, একর্ডিয়ন, কারোসেল ইত্যাদি। এগুলির সাহায্যে আপনি ইউজার এক্সপেরিয়েন্স এবং ওয়েবসাইটের নেভিগেশন আরও কার্যকরী এবং দৃষ্টিনন্দন করতে পারেন।

বুটস্ট্রাপ ৫ একটি শক্তিশালী ফ্রেমওয়ার্ক যা কেবল CSS এবং HTML এর মাধ্যমে লেআউট এবং ডিজাইন তৈরি করতে সহায়তা করে না, বরং JavaScript কম্পোনেন্টসও প্রদান করে, যা আরও ইন্টারেক্টিভ এবং ডাইনামিক ওয়েবসাইট তৈরি করতে সাহায্য করে। এই JavaScript কম্পোনেন্টস ব্যবহার করে আপনি সহজেই মডাল, টুলটিপ, পপওভার, ড্রপডাউন, ক্যালেন্ডার, করসেল ইত্যাদি তৈরি করতে পারেন।

বুটস্ট্রাপ ৫ এ JavaScript কম্পোনেন্টস সহজে বুটস্ট্রাপ JS লাইব্রেরি দিয়ে ইনস্টল করা হয় এবং প্রতিটি কম্পোনেন্টকে কার্যকর করতে কিছু নির্দিষ্ট HTML এবং JavaScript কোড ব্যবহার করতে হয়।

বুটস্ট্রাপ ৫ এর জনপ্রিয় JavaScript কম্পোনেন্টস

1. Modal

Modal একটি পপ-আপ উইন্ডো যা একটি ডায়লগ বা পপ-আপ ফর্ম তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত কোনও গুরুত্বপূর্ণ তথ্য প্রদর্শন করতে বা ব্যবহারকারীর থেকে ইনপুট নিতে ব্যবহৃত হয়।

উদাহরণ: Modal কম্পোনেন্ট

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Content goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JavaScript: মডাল সিস্টেমটি বুটস্ট্রাপের JavaScript লাইব্রেরির মাধ্যমে কার্যকর হয়।

2. Tooltip

Tooltip হল একটি ছোট পপ-আপ বক্স যা কোনও এলিমেন্টের উপর হভার করলে দেখায়। এটি সাধারণত ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য বা হিন্ট প্রদান করার জন্য ব্যবহৃত হয়।

উদাহরণ: Tooltip কম্পোনেন্ট

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Hover over me
</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

JavaScript: টুলটিপের কার্যকারিতা বুটস্ট্রাপের JavaScript লাইব্রেরি ব্যবহার করে থাকে, যা উপরোক্ত কোডে ইনিশিয়েট করা হয়েছে।

3. Popover

Popover টুলটিপের মতোই কিন্তু এটি আরও বড় এবং সাধারণত অতিরিক্ত কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। এটি আইকন বা বাটনে ক্লিক করলে দেখানো হয়।

উদাহরণ: Popover কম্পোনেন্ট

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover Title" data-bs-content="Some content inside the popover">
  Click to toggle popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>

JavaScript: পপওভারের কার্যকারিতা bootstrap.Popover ক্লাসের মাধ্যমে কনফিগার করা হয়।

4. Carousel

Carousel হলো একটি স্লাইডশো উপাদান যা একাধিক কনটেন্ট (ছবি বা টেক্সট) স্লাইড করে দেখায়। এটি সাধারণত ওয়েবসাইটে প্রচারণা বা প্রোডাক্ট প্রদর্শন করতে ব্যবহৃত হয়।

উদাহরণ: Carousel কম্পোনেন্ট

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

JavaScript: ক্যারোসেল উপাদানটির অটোমেটিক স্লাইডিং বা ম্যানুয়াল কন্ট্রোলগুলি বুটস্ট্রাপের JavaScript লাইব্রেরি দিয়ে কাজ করে।

5. Dropdown

Dropdown কম্পোনেন্ট একটি মেনু তৈরি করে যা ক্লিক করলে অথবা হভার করলে ড্রপডাউন মেনু প্রদর্শিত হয়। এটি সাধারণত নেভিগেশন বা অ্যাকশন আইটেমের জন্য ব্যবহৃত হয়।

উদাহরণ: Dropdown কম্পোনেন্ট

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

JavaScript: ড্রপডাউন কম্পোনেন্টের কার্যকারিতা data-bs-toggle="dropdown" অ্যাট্রিবিউটের মাধ্যমে পরিচালিত হয়, তবে এক্সট্রা কাস্টম জাভাস্ক্রিপ্ট প্রয়োজন হতে পারে।

বুটস্ট্রাপ ৫ JavaScript লাইব্রেরি ইনক্লুড করা

বুটস্ট্রাপ ৫ এর JavaScript কম্পোনেন্টগুলি কাজ করতে, আপনাকে Bootstrap JS এবং Popper.js ইনক্লুড করতে হবে। সেগুলি সিডিএন (CDN) লিংক ব্যবহার করে সহজেই অন্তর্ভুক্ত করা যেতে পারে।

<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

এই স্ক্রিপ্টগুলো আপনার HTML ডকুমেন্টের শেষে অন্তর্ভুক্ত করুন, যাতে আপনার পেজ দ্রুত লোড হয় এবং সঠিকভাবে কাজ করে।

সারাংশ

বুটস্ট্রাপ ৫ এর JavaScript কম্পোনেন্টগুলো আপনার ওয়েবসাইটে ইন্টারঅ্যাকটিভ উপাদান যোগ করতে সহায়ক। আপনি মডাল, টুলটিপ, পপওভার, ক্যারোসেল, ড্রপডাউন ইত্যাদি কম্পোনেন্ট ব্যবহার করে আপনার পেজের ইউজার এক্সপিরিয়েন্স উন্নত করতে পারেন।

বুটস্ট্রাপ ৫ এর Modals, Tooltips, এবং Popovers এগুলো ওয়েব পেজে ইন্টারঅ্যাকটিভ উপাদান যোগ করতে সহায়ক। এই উপাদানগুলিকে আপনি JavaScript এর মাধ্যমে কন্ট্রোল বা পরিচালনা করতে পারেন। এখানে এই তিনটি উপাদান কিভাবে JavaScript দিয়ে কন্ট্রোল করবেন তা বিস্তারিতভাবে দেখানো হয়েছে।

Modals কন্ট্রোল করা

Modals হল পপ-আপ ডায়ালগ উইন্ডো যা একটি ব্যবহারকারী-ইন্টারঅ্যাকশন প্রম্পট হিসেবে কাজ করে। বুটস্ট্র্যাপ ৫ এ Modal তে JavaScript দিয়ে বিভিন্ন কার্যকারিতা যেমন মডাল খোলা, বন্ধ করা, এবং কাস্টম ট্রিগার করা যায়।

Modals খুলতে এবং বন্ধ করতে JavaScript ব্যবহার করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- Modal Trigger Button -->
    <button id="modalButton" class="btn btn-primary">Modal খুলুন</button>

    <!-- Modal Structure -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    আপনার মডাল কন্টেন্ট এখানে যাবে।
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">বন্দ করুন</button>
                    <button type="button" class="btn btn-primary">সংরক্ষণ করুন</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

    <script>
        // Modal কোড দিয়ে খুলুন
        const modalButton = document.getElementById('modalButton');
        const modal = new bootstrap.Modal(document.getElementById('exampleModal'));

        modalButton.addEventListener('click', function() {
            modal.show(); // Modal খুলবে
        });
    </script>

</body>
</html>

ব্যাখ্যা:

• bootstrap.Modal ব্যবহার করে JavaScript দিয়ে মডাল খুলতে এবং বন্ধ করতে পারেন।
• modal.show() দিয়ে মডাল দেখানো হয় এবং modal.hide() দিয়ে বন্ধ করা হয়।

Tooltips কন্ট্রোল করা

Tooltips হল ক্ষণস্থায়ী ছোট তথ্য যা আইটেমের উপর হোভার করলে প্রদর্শিত হয়। JavaScript দিয়ে আপনি টুলটিপকে ডায়নামিকভাবে ট্রিগার করতে এবং কন্ট্রোল করতে পারেন।

Tooltips চালু এবং বন্ধ করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tooltip Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- Tooltip Trigger Element -->
    <button id="tooltipButton" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="এই বাটনটি ক্লিক করলে তথ্য পাওয়া যাবে">
        টুলটিপ দেখান
    </button>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

    <script>
        // Tooltip সেটআপ এবং কন্ট্রোল করা
        const tooltipButton = document.getElementById('tooltipButton');
        const tooltip = new bootstrap.Tooltip(tooltipButton);

        // Tooltip টগল করা
        tooltipButton.addEventListener('click', function() {
            tooltip.toggle(); // Tooltip চালু বা বন্ধ হবে
        });
    </script>

</body>
</html>

ব্যাখ্যা:

• new bootstrap.Tooltip() ব্যবহার করে টুলটিপ কন্ট্রোল করা হয়।
• tooltip.toggle() ব্যবহার করে আপনি টুলটিপ চালু বা বন্ধ করতে পারেন।

Popovers কন্ট্রোল করা

Popovers টুলটিপের মতোই, তবে এতে আরও বেশি কাস্টম কন্টেন্ট (যেমন টেক্সট, HTML, বা লিঙ্ক) থাকে। JavaScript ব্যবহার করে আপনি পপওভার কন্ট্রোল করতে পারেন, যেমন পপওভার খুলতে এবং বন্ধ করতে।

Popovers চালু এবং বন্ধ করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popover Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- Popover Trigger Element -->
    <button id="popoverButton" class="btn btn-info" data-bs-toggle="popover" title="Popover Title" data-bs-content="এটি একটি পপওভার উদাহরণ">
        পপওভার দেখান
    </button>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

    <script>
        // Popover সেটআপ এবং কন্ট্রোল করা
        const popoverButton = document.getElementById('popoverButton');
        const popover = new bootstrap.Popover(popoverButton);

        // Popover টগল করা
        popoverButton.addEventListener('click', function() {
            popover.toggle(); // Popover চালু বা বন্ধ হবে
        });
    </script>

</body>
</html>

ব্যাখ্যা:

• new bootstrap.Popover() ব্যবহার করে পপওভার কন্ট্রোল করা হয়।
• popover.toggle() ব্যবহার করে আপনি পপওভার চালু বা বন্ধ করতে পারেন।

সারাংশ

বুটস্ট্র্যাপ ৫ এর Modals, Tooltips, এবং Popovers সহজেই JavaScript ব্যবহার করে কন্ট্রোল করা যেতে পারে। আপনি show(), hide(), toggle() পদ্ধতিগুলি ব্যবহার করে এগুলোকে কাস্টমাইজ এবং পরিচালনা করতে পারেন, যা আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও ইন্টারেক্টিভ এবং ফাংশনাল বানায়।

Events এবং Callback Functions হল জাভাস্ক্রিপ্টের গুরুত্বপূর্ণ ধারণা যা ডাইনামিক ওয়েব পেজ তৈরি করতে ব্যবহৃত হয়। এগুলি ওয়েব পেজের ইন্টারঅ্যাকশন এবং ইউজার ইনপুট প্রক্রিয়া পরিচালনা করতে সাহায্য করে। যখন কোন ইউজার কোনো ইন্টারঅ্যাকশন করেন, তখন তা কার্যকর করার জন্য ইভেন্ট এবং কলব্যাক ফাংশন ব্যবহৃত হয়।

Events (ইভেন্টস)

ইভেন্ট হল কোনো বিশেষ কার্যকলাপ বা পরিস্থিতি যা ব্রাউজারে ঘটে, যেমন ইউজারের ক্লিক করা, মাউস মুভ করা, কীবোর্ডে কিছু চাপা, বা পেজ লোড হওয়া। ইভেন্টগুলি ডকুমেন্টের বিভিন্ন অংশে ঘটতে পারে, এবং ব্রাউজার ইভেন্টগুলি পর্যবেক্ষণ করে, সেগুলোর জন্য প্রক্রিয়া তৈরি করতে সক্ষম হয়।

ইভেন্টের উদাহরণ:

• Click Event: ইউজার যখন কোনো বাটনে ক্লিক করে
• Mouseover Event: মাউস যখন কোনো উপাদানের উপরে চলে আসে
• Keyup/Keydown Event: যখন কোনো কী চাপা হয়
• Submit Event: ফর্ম সাবমিট হলে

ইভেন্ট লিসেনার (Event Listener)

ইভেন্ট লিসেনার হল একটি ফাংশন যা একটি নির্দিষ্ট ইভেন্টের জন্য অপেক্ষা করে এবং সেই ইভেন্ট ঘটলে কল হয়। ব্রাউজারে addEventListener() মেথড ব্যবহার করে ইভেন্ট লিসেনার যুক্ত করা হয়।

উদাহরণ: Click ইভেন্ট লিসেনার

<button id="myButton">Click Me</button>

<script>
  const button = document.getElementById('myButton');
  
  button.addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>

এখানে, addEventListener() মেথডের মাধ্যমে বাটনটিতে ক্লিক করলে একটি এলার্ট মেসেজ প্রদর্শিত হবে।

Callback Functions (কলব্যাক ফাংশন)

Callback Function হল একটি ফাংশন যা অন্য একটি ফাংশনের আর্গুমেন্ট হিসেবে পাস করা হয় এবং তারপর সেই ফাংশনটি একটি নির্দিষ্ট সময় পরে বা কোনো নির্দিষ্ট পরিস্থিতিতে কল হয়। এটি সাধারণত অ্যাসিঙ্ক্রোনাস (asynchronous) প্রোগ্রামিংয়ে ব্যবহৃত হয়।

যখন আপনি একটি ফাংশন কল করেন, সেই ফাংশনটির কিছু কাজ সম্পন্ন হওয়ার পরে একটি কলব্যাক ফাংশনকে কল করা হতে পারে। কলব্যাক ফাংশনকে অ্যাসিঙ্ক্রোনাস কাজের শেষে কার্যকর করা হয়।

উদাহরণ: সাধারণ কলব্যাক ফাংশন

function greet(name, callback) {
  console.log('Hello, ' + name);
  callback();
}

function thankYou() {
  console.log('Thank you for visiting!');
}

greet('John', thankYou);

এখানে, greet() ফাংশনটি একটি callback আর্গুমেন্ট নেয় এবং কাজ শেষে thankYou() কলব্যাক ফাংশনটিকে কল করে।

কলব্যাক ফাংশনের ব্যবহার:

• Asynchronous Functions: কলব্যাক ফাংশন অ্যাসিঙ্ক্রোনাস কাজের পরবর্তী পদক্ষেপ নির্দেশ করতে ব্যবহৃত হয়।
• Event Handling: ইউজার ইন্টারঅ্যাকশনের পরে (যেমন ক্লিক, হোভার, ইত্যাদি) কলব্যাক ফাংশন কল করা হয়।

অ্যাসিঙ্ক্রোনাস কলব্যাক ফাংশন

জাভাস্ক্রিপ্টে অ্যাসিঙ্ক্রোনাস কাজের জন্য কলব্যাক ফাংশন ব্যবহার করা হয়, যেমন সার্ভার থেকে ডেটা ফেচ করা, সময় নির্ধারণ করা বা ফাইল আপলোড করা।

উদাহরণ: setTimeout() এর মাধ্যমে অ্যাসিঙ্ক্রোনাস কলব্যাক

console.log('Start');

setTimeout(function() {
  console.log('This will run after 2 seconds');
}, 2000);

console.log('End');

এই উদাহরণে, setTimeout() একটি অ্যাসিঙ্ক্রোনাস ফাংশন যা ২ সেকেন্ড পরে কলব্যাক ফাংশনটি চালু করবে। এখানে Start এবং End একসাথে প্রিন্ট হবে, তারপর ২ সেকেন্ড পরে কলব্যাক ফাংশনটি রান করবে।

ইভেন্ট এবং কলব্যাক ফাংশনের মধ্যে সম্পর্ক

ইভেন্ট এবং কলব্যাক ফাংশন একসাথে কাজ করতে পারে, যেখানে ইভেন্টের মাধ্যমে কলব্যাক ফাংশন ট্রিগার হয়। উদাহরণস্বরূপ, আপনি একটি বাটনে ক্লিক করলে একটি কলব্যাক ফাংশন কল করতে পারেন।

উদাহরণ: ক্লিক ইভেন্টে কলব্যাক ফাংশন

<button id="clickButton">Click Me!</button>

<script>
  const button = document.getElementById('clickButton');

  button.addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>

এখানে, click ইভেন্টের মাধ্যমে কলব্যাক ফাংশনটি ট্রিগার হয়।

সারাংশ

• ইভেন্ট হল ব্রাউজারের মধ্যে ঘটানো এক বা একাধিক কার্যকলাপ (যেমন ইউজারের ক্লিক করা বা মাউস মুভ করা)।
• ইভেন্ট লিসেনার এমন একটি ফাংশন যা নির্দিষ্ট ইভেন্টটি শোনে এবং ইভেন্ট ঘটলে কল হয়।
• Callback Function হল এমন একটি ফাংশন যা অন্য একটি ফাংশন কল করার পরে কার্যকর হয়, সাধারণত অ্যাসিঙ্ক্রোনাস কাজ বা ইভেন্ট হ্যান্ডলিংয়ের ক্ষেত্রে ব্যবহৃত হয়।

এই দুটি ধারণা মিলিয়ে ওয়েব অ্যাপ্লিকেশন এবং ইউজার ইন্টারফেসে ইন্টারঅ্যাকশন পরিচালনা করা হয়।

বুটস্ট্র্যাপ ৫ ব্যবহার করার সময় আপনি সহজে কাস্টম JavaScript কোড এবং বুটস্ট্র্যাপের ইন্টারঅ্যাক্টিভ ফিচারগুলো একসাথে ইন্টিগ্রেট করতে পারবেন। বুটস্ট্র্যাপ নিজেই অনেক ফিচার যেমন modals, tooltips, popovers, dropdowns, collapse, offcanvas ইত্যাদি সবার জন্য জাভাস্ক্রিপ্ট সরবরাহ করে, তবে কখনো কখনো আপনাকে কাস্টম কোডও ব্যবহার করতে হতে পারে।

এখানে আমরা দেখবো কীভাবে Custom JavaScript কোডের মাধ্যমে বুটস্ট্র্যাপ কম্পোনেন্ট ব্যবহার এবং কাস্টমাইজ করা যায়।

Bootstrap কম্পোনেন্ট এবং Custom JavaScript Integration

বুটস্ট্র্যাপের কম্পোনেন্টগুলোর বেশিরভাগই JavaScript দ্বারা কন্ট্রোল করা যায়। আপনি সহজেই বুটস্ট্র্যাপের ডিফল্ট ইভেন্ট লিস্টেনার বাদ দিয়ে কাস্টম ইভেন্ট হ্যান্ডলিং যুক্ত করতে পারেন।

উদাহরণ: Modal Integration with Custom JavaScript

বুটস্ট্র্যাপের Modal কম্পোনেন্ট সাধারণত data-bs-toggle="modal" অ্যাট্রিবিউট দ্বারা ট্রিগার হয়, তবে আপনি কাস্টম JavaScript কোড দিয়েও মডালটি কন্ট্রোল করতে পারেন।

1. HTML Structure:

   <button class="btn btn-primary" id="customModalButton">
     Open Custom Modal
   </button>
   
   <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
           This is a custom modal with JavaScript integration.
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div>
     </div>
   </div>
   

2. Custom JavaScript for Modal:

   এখন আপনি JavaScript ব্যবহার করে মডালটি কাস্টমভাবে ট্রিগার করতে পারেন।

   // Modal instance creation
   var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
     keyboard: false  // Disable closing modal with keyboard
   });
   
   // Custom button click event to show modal
   document.getElementById('customModalButton').addEventListener('click', function () {
     myModal.show(); // Show the modal when the button is clicked
   });
   
   // You can also hide the modal programmatically
   document.getElementById('hideModalButton').addEventListener('click', function () {
     myModal.hide(); // Hide the modal
   });
   

এখানে, new bootstrap.Modal() দ্বারা মডালটি একটি instance হিসেবে তৈরি করা হয়েছে এবং myModal.show() এবং myModal.hide() দিয়ে আপনি মডালটি কাস্টমভাবে ট্রিগার বা হাইড করতে পারেন।

Dropdowns এবং Custom JavaScript Integration

Dropdowns কম্পোনেন্ট বুটস্ট্র্যাপের একটি জনপ্রিয় ফিচার, যা সাধারণত data-bs-toggle="dropdown" অ্যাট্রিবিউট দিয়ে ব্যবহৃত হয়। তবে আপনি এটি JavaScript দিয়েও কন্ট্রোল করতে পারেন।

1. HTML Structure for Dropdown:

   <div class="dropdown">
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
       Dropdown button
     </button>
     <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
       <li><a class="dropdown-item" href="#">Action</a></li>
       <li><a class="dropdown-item" href="#">Another action</a></li>
       <li><a class="dropdown-item" href="#">Something else here</a></li>
     </ul>
   </div>
   

2. Custom JavaScript for Dropdown:

   Dropdown কন্ট্রোল করতে, আপনি JavaScript এর মাধ্যমে কাস্টম toggle অ্যাকশন তৈরি করতে পারেন।

   var myDropdown = new bootstrap.Dropdown(document.getElementById('dropdownMenuButton'));
   
   // Toggle dropdown programmatically
   document.getElementById('customDropdownButton').addEventListener('click', function () {
     myDropdown.toggle();
   });
   

এখানে new bootstrap.Dropdown() দ্বারা dropdown এর একটি instance তৈরি করা হয়েছে এবং myDropdown.toggle() এর মাধ্যমে এটি প্রোগ্রাম্যাটিকভাবে টোগল (খোলা বা বন্ধ) করা যাচ্ছে।

Tooltip এবং Popover Integration with JavaScript

Tooltip এবং Popover কম্পোনেন্টগুলিও JavaScript দ্বারা কাস্টমাইজ বা টোগল করা যেতে পারে।

1. Tooltip HTML Example:

   <button type="button" class="btn btn-secondary" id="tooltipButton" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
     Hover me to see tooltip
   </button>
   

2. Tooltip JavaScript:

   Tooltip কম্পোনেন্টটি কাস্টম JavaScript দিয়ে ইনিশিয়ালাইজ এবং টোগল করা যেতে পারে:

   var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
   var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new bootstrap.Tooltip(tooltipTriggerEl);
   });
   
   // Custom button to show/hide tooltip
   document.getElementById('tooltipButton').addEventListener('click', function () {
     var tooltip = new bootstrap.Tooltip(this);
     tooltip.toggle();
   });
   

এই কোডের মাধ্যমে Tooltip ইভেন্টগুলি কাস্টমভাবে পরিচালিত হচ্ছে এবং টোগল করা হচ্ছে।

Conclusion

বুটস্ট্র্যাপ ৫ এর JavaScript ইন্টিগ্রেশন আপনাকে কম্পোনেন্টগুলিকে কাস্টমভাবে কন্ট্রোল করার ব্যাপক সুযোগ দেয়। আপনি কম্পোনেন্টের ডিফল্ট আচরণ পরিবর্তন করতে পারেন, ইভেন্ট হ্যান্ডলিং কাস্টমাইজ করতে পারেন এবং একাধিক কম্পোনেন্টকে একত্রে কার্যকরভাবে ব্যবহৃত করতে পারেন। এই ধরণের কাস্টম JavaScript কোড ব্যবহারের মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরো ইন্টারঅ্যাকটিভ এবং ইউজার ফ্রেন্ডলি করতে পারেন।